<template>
  <div class="user-avator-dropdown" :class="getTheme()">
    <Dropdown @on-click="handleClick">
      <!-- <span class="user-name" :class="getTheme()">{{orgName}}</span> -->
      <Avatar size="24" icon="ios-person" />
      <!-- <Avatar size="24" :src="userAvator" /> -->
      <span class="user-name" :class="getTheme()">{{userName}}</span>
      <DropdownMenu slot="list">
        <DropdownItem name="changePwd">修改密碼</DropdownItem>
        <DropdownItem name="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>

    <Modal v-model="optTipsShow" :mask-closable="false" class-name="vertical-center-modal">
      <p slot="header" style="display: flex;justify-content: flex-start;align-items: center;">
        <Icon type="ios-information-circle" size='24' style='color:#F90;'></Icon>
        <span>&emsp;密码修改</span>
      </p>
      <div style="font-size: 13px;padding: 12px 20px;">
        <Form :model="formData" ref="formValidate" :rules="ruleValidate" :label-width="80">
          <!-- <FormItem style="height:0">
            <Input v-model="formData.oldPasswordTmp" type="text" class="hide-input"></Input>
          </FormItem>
          <FormItem style="height:0">
            <Input v-model="formData.newPasswordTmp" type="text" class="hide-input"></Input>
          </FormItem>
          <FormItem style="height:0">
            <Input v-model="formData.confirmPasswordTmp" type="text" class="hide-input"></Input>
          </FormItem> -->
          <FormItem label="原密码" prop='oldPassword'>
            <Input v-model="formData.oldPassword" type="password" password clearable autocomplete="new-password"
              placeholder="请输入原密码"></Input>
          </FormItem>
          <FormItem label="新密码" prop='newPassword'>
            <Input v-model="formData.newPassword" type="password" password clearable autocomplete="new-password"
              placeholder="请输入新密码"></Input>
          </FormItem>
          <FormItem label="密码确认" prop='confirmPassword'>
            <Input v-model="formData.confirmPassword" type="password" password autocomplete="new-password" clearable
              placeholder="请确认新密码"></Input>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button class='btn cancle-btn' @click='close()'>取消</Button>
        <Button class='btn' type="primary" @click="changeSave()" :loading='loading'>确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import './user.less'
  import {
    mapMutations,
    mapActions
  } from 'vuex'
  export default {
    name: 'User',
    props: {
      userAvator: {
        type: String,
        default: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
      },
      theme: {
        type: String,
        default: 'light'
      },
      userName: {
        type: String,
        default: ""
      },
      orgName: {
        type: String,
        default: ""
      },
    },
    data() {
       // 重复密码验证
      const pwdAgainCheck = async (rule, value, callback) => {
        if (value.length < 1) {
          return callback(new Error('请确认新密码！'));
        } else if (this.formData.newPassword != this.formData.confirmPassword) {
          return callback(new Error('两次输入密码不一致！'));
        } else {
          callback()
        }
      };
      return {
        optTipsShow: false,
        loading: false,
        formData: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: '',
          oldPasswordTmp: '',
          newPasswordTmp: '',
          confirmPasswordTmp: '',
        },

        ruleValidate: {
          oldPassword: [{
            required: true,
            message: '请输入原始密码',
            trigger: 'blur'
          }],
          newPassword: [{
            required: true,
            message: '请输入新密码',
            trigger: 'blur'
          }],
          confirmPassword: [{
            required: true,
            validator: pwdAgainCheck,
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      ...mapActions([
        'handleChangePwd'
      ]),
       ...mapMutations(['logout']),
      handleClick(name) {
        switch (name) {
          case 'logout':
            this.logout(this);
            break
          case 'changePwd':
            this.changePwd()
            break
        }
      },
      changePwd() {
        // 修改密码
        this.optTipsShow = true
      },
      close() {
        this.optTipsShow = false;
        this.formData.oldPassword = "";
        this.formData.newPassword = "";
        this.formData.confirmPassword = "";
        this.$refs.formValidate.resetFields();
      },
      changeSave() {
        this.$refs.formValidate.validate((valid) => {
          if (valid) {
            this.loading = true
            let params = {
              "confirmPassword": this.formData.confirmPassword,
              "newPassword": this.formData.newPassword,
              "oldPassword": this.formData.oldPassword
            }
            this.handleChangePwd(params).then(result => {
              this.loading = false;
              this.close()
              this.$msg.success.call(this, '密码修改成功')
            }).catch(error => {
              this.loading = false;
              this.$msg.error.call(this, error ? error : '密码修改失败')
            })
          } else {

          }
        })
      },
      getTheme() {
        var key = this.theme;
        switch (key) {
          case 'light':
            return 'light'
            break;
          case 'dark':
            return 'dark'
            break;
          default:
            return ''
            break;
        }
      },
    }
  }
</script>